<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" th:href="@{/hui/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/hui/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/hui/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/hui/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/hui/h-ui.admin/css/style.css}"/>
    <script type="text/javascript" th:src="@{/lib2/jquery/1.9.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/hui/lib/layer/2.4/layer.js}"></script>
    <script type="text/javascript" th:src="@{/hui/h-ui/js/H-ui.js}"></script>
    <script type="text/javascript" th:src="@{/hui/h-ui.admin/js/H-ui.admin.page.js}"></script>
    <title>最新音乐列表</title>
</head>

<body>
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="http://localhost:8080" target="_blank">康康音乐播放器</a>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
            <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li class="dropDown dropDown_hover">
                        <a href="#" class="dropDown_A">
                            你好，[[${session._user.getUsername()}]]！<i class="Hui-iconfont">&#xe6d5;</i>
                        </a>

                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a th:href="@{/logout}">退出</a></li>
                        </ul>
                    </li>

                    <li id="Hui-skin" class="dropDown right dropDown_hover">
                        <a href="javascript:;" class="dropDown_A" title="换肤">
                            <i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i>
                        </a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                            <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                            <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                            <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                            <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                            <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<aside class="Hui-aside">
    <div class="menu_dropdown bk_2">
        <dl id="menu-member">
            <b style="margin-left: 16px">上次登陆时间：</b><br/>
            <span style="margin-left: 45px">
                [[${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}]]
            </span>
            <hr style="border-color: #e5e5e5;"/>
        </dl>

        <dl id="menu-member">
            <dt>
                <i class="Hui-iconfont">&#xe60d;</i>
                用户管理
                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
            </dt>

            <dd>
                <ul>
                    <li>
                        <a th:href="@{/msystem/userslist}" title="用户列表">用户列表</a>
                    </li>
                    <li>
                        <a th:href="@{/msystem/userslist2}" title="权限设置">权限设置</a>
                    </li>
                </ul>
            </dd>
        </dl>

        <dl id="menu-product">
            <dt>
                <i class="Hui-iconfont">&#xe620;</i>
                音乐管理
                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
            </dt>
            <dd>
                <ul>
                    <li><a th:href="@{/msystem/bannerslist}" title="轮播图管理">轮播图管理</a></li>
                    <li><a th:href="@{/msystem/playlistslist}" title="推荐歌单管理">推荐歌单管理</a></li>
                    <li><a th:href="@{/msystem/songslist}" title="最新音乐管理">最新音乐管理</a></li>
                    <li><a th:href="@{/msystem/mvslist}" title="推荐MV管理">推荐MV管理</a></li>
                </ul>
            </dd>
        </dl>

        <dl id="menu-comments">
            <dt>
                <i class="Hui-iconfont">&#xe622;</i>
                我的音乐
                <i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i>
            </dt>
            <dd>
                <ul>
                    <li>
                        <a th:href="@{/msystem/myCollection2}" title="查看收藏">查看收藏</a>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加最新音乐</h4>
                </div>
                <div class="modal-body">
                    <form id="myForm">
                        <table>
                            <tr>
                                <td th:align="right" style="font-size: large">
                                    最新音乐名：
                                </td>
                                <td th:align="left">
                                    <input id="songname" type="text" style="font-size: large; width: auto" name="songname"/>
                                </td>
                            </tr>
                            <tr>
                                <td th:align="right" style="font-size: large">
                                    歌手名：
                                </td>
                                <td th:align="left">
                                    <input id="songart" type="text" style="font-size: large; width: auto" name="songart"/>
                                </td>
                            </tr>
                            <tr>
                                <td th:align="right" style="font-size: large">
                                    最新音乐封面地址：
                                </td>
                                <td th:align="left">
                                    <input id="picurl" type="text" style="font-size: large; width: auto" name="picurl"/>
                                </td>
                            </tr>
                            <tr>
                                <td th:align="right" style="font-size: large">
                                    最新音乐播放ID：
                                </td>
                                <td th:align="left">
                                    <input id="location" type="text" style="font-size: large; width: auto" name="location"/>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addSong()" data-dismiss="modal">添加</button>
                </div>
            </div>
        </div>
    </div>
</aside>

<div class="dislpayArrow hidden-xs">
    <a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
</div>

<section class="Hui-article-box">
    <nav class="breadcrumb">
        <a href="/msystem/index" class="maincolor">首页</a>
        <span class="c-gray en">&gt;</span>
        发现音乐
        <span class="c-gray en">&gt;</span>
        最新音乐列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>

    <div class="Hui-article">
        <article class="cl pd-20">
            <table class="table table-border table-bordered table-bg" id="mytable">
                <thead>
                <tr>
                    <th scope="col" colspan="12">
                        最新音乐列表&nbsp;&nbsp;&nbsp;&nbsp;
                        <button th:if="${session._user.getUsertype() == '1'}" class="btn btn-primary btn-lg"
                                data-toggle="modal" data-target="#myModal">
                            添加最新音乐
                        </button>
                        <span class="r">共有数据：<strong th:text="${totals}"></strong> 条</span>
                    </th>
                </tr>
                <tr class="text-c">
                    <th width="">ID</th>
                    <th width="">最新音乐名</th>
                    <th width="">歌手名</th>
                    <th width="">最新音乐封面</th>
                    <th width="">状态</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>

                <tr class="text-c" th:each="song,item : ${data}">
                    <td style="text-align: center" th:text="${item.index + 1}"></td>
                    <td style="text-align: center" th:text="${song.getSongsName()}"></td>
                    <td style="text-align: center" th:text="${song.getSongsArtistname()}"></td>
                    <td style="text-align: center" th:text="${song.getSongsPicurl()}"></td>

                    <td style="text-align: center" th:if="${song.getSongsType()} == '1'">
                        <font style="color: red">已上架</font>
                    </td>
                    <td style="text-align: center" th:if="${song.getSongsType()} == '0'">
                        <font style="color: green">已下架</font>
                    </td>
                    <td style="text-align: center" class="td-manage" th:if="${session._user.getUsertype()} == '1'">
                        <a style="text-decoration:none"
                           th:onclick="up([[${song.getSongsId()}]],[[${song.getSongsType()}]])"
                           href="javascript:;">
                            <i class="Hui-iconfont">
                                &#xe615;
                            </i>
                        </a>

                        <a style="text-decoration:none"
                           th:onclick="down([[${song.getSongsId()}]],[[${song.getSongsType()}]])"
                           href="javascript:;">
                            <i class="Hui-iconfont">
                                &#xe631;
                            </i>
                        </a>

                        <a deleteLink="true" title="删除" th:href="@{/msystem/songdel(id=${song.getSongsId()})}"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>

                    <td style="text-align: center" th:if="${session._user.getUsertype()} == '0'">
                        无操作权限
                    </td>
                </tr>
                </tbody>
            </table>
        </article>
    </div>
</section>
</body>
<script>
    function addSong() {
        var location = document.getElementById("location").value;
        if (isNaN(location)) {
            alert("请将最新音乐播放ID设为数字值！")
        } else {
            var data = $("#myForm").serialize();
            $.ajax({
                type: "get",
                url: "/msystem/addSong",
                data: data,
                success: function (result) {
                    alert(result);
                    setTimeout(window.location.href = '/msystem/songslist', 2000);
                }
            })
        }
    }

    $(function () {
        $("a").click(function () {
            var deleteLink = $(this).attr("deleteLink");
            console.log(deleteLink);
            if ("true" == deleteLink) {
                var confirmDelete = confirm("确定要删除吗？");
                if (confirmDelete)
                    return true;
                return false;
            }
        });
    })

    // 上架
    function up(id, type) {
        if (type == 1) {
            alert("该音乐正在发行中~")
        } else {
            layer.confirm('确认要上线吗？', function () {
                $.ajax({
                    type: "get",
                    url: "/msystem/upSong?id=" + id,
                    success: function (result) {
                        alert(result);
                        setTimeout(window.location.href = '/msystem/songslist', 2000);
                    }
                })
            })
        }
    }

    // 下架
    function down(id, type) {
        if (type == 0) {
            alert("该音乐已经下架了~")
        } else {
            layer.confirm('确认要下线吗？', function () {
                $.ajax({
                    type: "get",
                    url: "/msystem/downSong?id=" + id,
                    success: function (result) {
                        alert(result);
                        setTimeout(window.location.href = '/msystem/songslist', 2000);
                    }
                })
            })
        }
    }
</script>
</html>